<template>
  <view class="container">
    <!-- <view class="navList"> -->
    <scroll-view :scroll-x="true" @scroll="scroll" :scroll-left="animation" scroll-with-animation="true" class="navList" style="white-space: nowrap;">
	  <view style="display: flex;">
	  	<view v-for="(item, index) in arrayType" :key="index">
	  		<view @click="qiehuan(item.type)" class="condition"
	  			:class="type == item.type?'select':''">
	  			<view>{{item.text}}</view>
	  			<view v-if="type == item.type"
	  				style="width: 38rpx;height: 6rpx;background: #1176EF;border-radius: 4rpx;margin: auto;">
	  			</view>
	  		</view>
	  	</view>
	  </view>

	  <!-- <view @click="qiehuan(0)" style="display: inline-block;margin-right:52rpx;" :class="type==0?'select':''">
        <view>全部</view>
        <view v-if="type==0"
              style="width: 38rpx;height: 6rpx;background: #1176EF;border-radius: 4rpx;margin: auto;"></view>
      </view>
      <view @click="qiehuan(1)" style="display: inline-block;margin-right:52rpx;" :class="type==1?'select':''">
        <view>待付款</view>
        <view v-if="type==1"
              style="width: 38rpx;height: 6rpx;background: #1176EF;border-radius: 4rpx;margin: auto;"></view>
      </view>
      <view @click="qiehuan(2)" style="display: inline-block;margin-right:52rpx;" :class="type==2?'select':''">
        <view>待报价</view>
        <view v-if="type==2"
              style="width: 38rpx;height: 6rpx;background: #1176EF;border-radius: 4rpx;margin: auto;"></view>
      </view>
      <view @click="qiehuan(3)" style="display: inline-block;margin-right:52rpx;" :class="type==3?'select':''">
        <view>选师傅</view>
        <view v-if="type==3"
              style="width: 38rpx;height: 6rpx;background: #1176EF;border-radius: 4rpx;margin: auto;"></view>
      </view>
      <view @click="qiehuan(4)" style="display: inline-block;margin-right:52rpx;" :class="type==4?'select':''">
        <view>待上门</view>
        <view v-if="type==4"
              style="width: 38rpx;height: 6rpx;background: #1176EF;border-radius: 4rpx;margin: auto;"></view>
      </view>
      <view @click="qiehuan(5)" style="display: inline-block;margin-right:52rpx;" :class="type==5?'select':''">
        <view>进行中</view>
        <view v-if="type==5"
              style="width: 38rpx;height: 6rpx;background: #1176EF;border-radius: 4rpx;margin: auto;"></view>
      </view>
      <view @click="qiehuan(8)" style="display: inline-block;margin-right:52rpx;" :class="type==8?'select':''">
        <view>待评价</view>
        <view v-if="type==8"
              style="width: 38rpx;height: 6rpx;background: #1176EF;border-radius: 4rpx;margin: auto;"></view>
      </view>
      <view @click="qiehuan(6)" style="display: inline-block;margin-right:52rpx;" :class="type==6?'select':''">
        <view>已完成</view>
        <view v-if="type==6"
              style="width: 38rpx;height: 6rpx;background: #1176EF;border-radius: 4rpx;margin: auto;"></view>
      </view> -->
      <!--      <view @click="qiehuan(7)" style="display: inline-block;margin-right:52rpx;" :class="type==7?'select':''">-->
      <!--        <view>帮人下单</view>-->
      <!--        <view v-if="type==7"-->
      <!--              style="width: 38rpx;height: 6rpx;background: #1176EF;border-radius: 4rpx;margin: auto;"></view>-->
      <!--      </view>-->
      <!-- <view @click="qiehuan(7)" style="display: inline-block;margin-right:48rpx;" :class="type==7?'select':''">
        <view>售后订单</view>
        <view v-if="type==7"
          style="width: 38rpx;height: 6rpx;background: #1176EF;border-radius: 4rpx;margin: auto;"></view>
      </view> -->
    </scroll-view>
    <view class="orderList">
<!--      class="content"-->
      <scroll-view id="scrollView" style="height: calc(100vh - env(safe-area-inset-bottom) - 50px );" scroll-y refresher-enabled :refresher-triggered="isTriggered"
                   @refresherrefresh="onRefresherrefresh"
                   @scrolltolower="onScrolltolower"
                   :scroll-top="scrollTop"
                   :key="scrollKey"
                   @scroll="onScroll($event)">
        <view class="orderBox" v-for="(item,index) in getDataList" :key="index">
          <view class="flexJusp" @click="detail(item)" style="font-size:26rpx;margin-bottom:24rpx;">
            <view style="font-weight:bold;">
              <text v-if="item.moshi == 1">一口价</text>
              <text
                  v-if="item.moshi == 2">报价下单
              </text>
              <text v-if="item.moshi == 3">悬赏下单</text>
              <text
                  v-if="item.moshi == 4">分时零工
              </text>
            </view>
            <view>
              <text style="color: #ED4F0A;" v-if="item.flag == 1">待付款</text>
              <text style="color: #ED4F0A;" v-if="item.flag == 2">待报价</text>
              <text style="color: #8F73FF;" v-if="item.flag == 3">选师傅</text>
              <text style="color: #8F73FF;" v-if="item.flag == 4">待上门</text>
              <text style="color: #1176EF;" v-if="item.flag == 5">进行中</text>
              <text style="color: #666666;" v-if="item.flag == 6">已完成</text>
              <text style="color: #666666;" v-if="item.flag == 8">待评价</text>
              <text style="color: #EC3333;" v-if="item.flag == 7">售后订单</text>
              <text style="color: #8F73FF;" v-if="item.flag == 9">待上门</text>
            </view>
          </view>
          <view class="flex" v-for="(items,indexs) in item.xiangmu" :key="indexs"
                style="background: #F6F6F6;border-radius: 16rpx;padding:16rpx;" >
			      <ImgPreview :list="items.listHuanimg" ></ImgPreview>
            <view style="width:438rpx; margin-left: 20rpx;" @click="detail(item)">
              <view style="font-weight: bold;color: #333333;">{{ items.goodsname }}</view>
              <view class="flexJusp" style="font-size: 24rpx;color: #666666;">
                <view>{{ items.xiangmu }}</view>
                <view>×{{ items.number }}</view>
              </view>
              <!-- <view style="font-size: 26rpx;color: #333333;">￥{{item.price}}</view> -->
            </view>
          </view>
          <view v-if="item.userid" class="flexJusp"
                style="border-bottom:2rpx solid #F0F0F0;padding:18rpx 0 16rpx;">
            <view class="flex" @click="detail(item)">
              <image style="width:70rpx;height:70rpx;border-radius:50%;margin-right:12rpx;" :src="item.icon">
              </image>
              <view v-if="item.flag==2">
                <view style="font-size:26rpx;line-height:36rpx;">{{ item.name || '' }}</view>
                <view v-if="item.flag==2" style="font-size:24rpx;color: #6C6C6C;line-height:34rpx;">
                  {{ item.address }}
                  <text style="color: #1176EF;">￥{{ item.prices }}</text>
                </view>
              </view>
              <view v-else>
                <view style="font-size: 30rpx;font-weight: bold;line-height:70rpx;">{{ item.name || '' }}
                </view>
              </view>
            </view>
            <view class="flex" @click="quotation(item)" v-if="item.flag==2"
                  style="font-size: 26rpx;margin-top:14rpx;">
              <view>选师傅</view>
              <image style="width:16rpx;height:24rpx;margin:8rpx 0 0 10rpx;" src="/static/image/05_fd.png">
              </image>
            </view>
          </view>
          <view class="flexJusp" style="margin-top:12rpx;">
            <view v-if="(item.price && item.price != '' && item.price > 0)||(item.moshi == 2 && item.qiprice && item.qiprice != '' && item.qiprice > 0)"
                  style="font-size: 24rpx;color: #333333;line-height: 64rpx;">
              {{ item.moshi == 2 ? "预期金额" : item.flag == 1 ? '待支付' : '订单金额' }}
              <text
                  style="color: #E90000;font-size:28rpx;font-weight:bold;">￥{{
                  item.moshi == 2 ? item.qiprice : item.price
                }}
              </text>
            </view>
            <view v-else></view>
            <view class="flex" v-if="item.flag==1">
              <!--              <view class="buttonx" style="margin-right:20rpx;" v-if="type != 7 || !item.openid"  @click="quorder(item,index)">取消订单</view>-->
              <view class="buttons" @click="zhifu(item)">立即支付</view>
              <view class="buttons" @click="detail(item)">查看订单</view>
            </view>
            <view class="flex" v-if="item.flag==3">
              <view class="buttonx" style="margin-right:20rpx;" @click="quorder(item,index)">取消订单</view>
              <view class="buttons" @click="quotation(item)">查看报价</view>
            </view>
            <view class="flex" v-if="item.flag==5">
              <view class="buttonx" style="margin-right:20rpx;" @click="detail(item)">查看订单</view>
              <view class="buttons" @click="complete(item)">确认完成</view>
            </view>
            <view class="flex" v-if="item.flag==6">
<!--              <view class="buttonx" style="margin-right:20rpx;" @click="receiving(item)">删除订单</view>-->
              <view class="buttons" @click="detail(item)">查看订单</view>
            </view>
            <view class="flex" v-if="item.flag==7">
              <!-- <view class="buttonx" style="margin-right:20rpx;" @click="receiving(item)">申请售后</view> -->
              <view class="buttons" @click="detail(item)">查看订单</view>
            </view>
            <view class="flex" v-if="item.flag==8">
<!--              <view class="buttonx" style="margin-right:20rpx;" @click="receiving(item)">删除订单</view>-->
              <view class="buttons" @click="evaluate(item)">立即评价</view>
            </view>
            <view class="buttons" v-if="item.flag==2||item.flag==4 ||item.flag==9" @click="detail(item)">查看订单</view>
          </view>
        </view>
        <view class="_image" v-if="getDataList.length == 0">
          <image src="@/static/no_more.png" mode=""></image>
          <view class="text">暂无数据</view>
        </view>
        <view class="loading" v-if="getDataList.length > 0">
          <view v-if="loading==1">数据加载中...</view>
          <view v-if="loading==2">没有更多了~~</view>
        </view>
        <view style="height: 60px"></view>
      </scroll-view>
    </view>

<!--    <view style="height:env(safe-area-inset-bottom);"></view>-->
    <view class="tabbar">
      <view class="flexJusp">
        <view @click="index">
          <image style="width:44rpx;height:44rpx;" src="/static/image/icon_sy.png"></image>
          <view>首页</view>
        </view>
        <view style="color: #1176EF;">
          <image style="width:44rpx;height:44rpx;" src="/static/image/icon_dd_fill.png"></image>
          <view>订单</view>
        </view>
        <view @click="placeorder" style="width:130rpx;"></view>
        <view @click="wallet">
          <image style="width:44rpx;height:44rpx;" src="/static/image/icon_qb.png"></image>
          <view>钱包</view>
        </view>
        <view @click="user">
          <image style="width:44rpx;height:44rpx;" src="/static/image/icon_wd.png"></image>
          <view>我的</view>
        </view>
        <image @click="placeorder" style="width:130rpx;height:130rpx;position: absolute;left:312rpx;top:-44rpx;"
               :src="this.$loadImage('homeOrderTip')"></image>
        <view @click="placeorder"
              style="font-size: 22rpx;color: #FFFFFF;position: absolute;left:332rpx;top:26rpx;">立即下单
        </view>
      </view>
      <view style="height:env(safe-area-inset-bottom);"></view>
    </view>
  </view>
</template>

<script>
import ImgPreview from '@/components/ImgPreview.vue'
import preview from '@/commonjs/preview.js'

export default {
	components: {
		ImgPreview
	},
  data() {
    return {
      type: 0,
      reslist: [],
      pageSize: 7, //数量
      loading: 0,  //0默认  1加载中  2没有更多了
      highLight: -1,
      dataMap: new Map(),
      scrollTop: 0,//滚动距离
      scrollKey: 0,//强制更新key
      isTriggered: false, //设置当前下拉刷新状态
	  animation: 0,
      laxin:'',
	  arrayType: [
	  	{ text: '全部', type: 0 },
	  	{ text: '待付款', type: 1 },
	  	{ text: '待报价', type: 2 },
	  	{ text: '选师傅', type: 3 },
	  	{ text: '待上门', type: 4 },
		{ text: '进行中', type: 5 },
		{ text: '已完成', type: 6 },
		{ text: '待评价', type: 8 },

	  ],
    }
  }, computed: {
    getDataList() {
      this.initializeMap()
      let list = this.dataMap.get(this.type).list;
      return list
    },
  },
  onShow() {
    let orderType = uni.getStorageSync('orderType')
    if (orderType) {
      this.type = orderType
      uni.setStorageSync('orderType', null)
    }
    uni.showLoading({
      title: '加载中'
    });
    this.loading = 0

	this.$httpapi('selectuserinfo', 'POST', {}).then(res => {
		if(res.code === 500) {
			this.dataMap = new Map()
		}else{
			this.initializeMap()
			this.needRefreshData()
		}
	})
	if (this.type>3) {
		this.animation = 180
	} else {
		this.animation = 0
	}
  },

  methods: {
    onLoad(e) {
      this.type = e.type ? e.type : 0
      uni.hideTabBar()
    },
    initializeMap() {
      if (this.dataMap.size === 0) {
        for (let i = 0; i <= 9; i++) {
          this.dataMap.set(i, {
            list: [],
            pageNum: 1,
            scrollTop: 0
          });
        }
      }
    },
    needRefreshData() {
      let flagData = this.dataMap.get(this.type);
      let flagList = flagData.list;
      // 如果页面数据为空，修改的订单时间在本页时间后，则清空数据重新加载
      let orderUpdateTime = this.$utils.getSyncTime()
      if (flagList.length === 0 || !flagData.syncTime || (orderUpdateTime && orderUpdateTime > flagData.syncTime)) {
        this.refresheDataList();
      } else {
        //隐藏加载框
        uni.hideLoading();
        this.isTriggered = false
      }
    },
    refresheDataList() {
      this.dataMap.get(this.type).scrollTop = 0
      this.scrollTop = this.dataMap.get(this.type).scrollTop;
      this.scrollKey++
      let flagData = this.dataMap.get(this.type);
      flagData.pageNum = 1;
      this.loading = 0
      this.loads()
    },
    loadMoreDataList() {
      let flagData = this.dataMap.get(this.type);
      flagData.pageNum++
      this.loading = 1
      this.loads()
    },
    onRefresherrefresh() {
      // 开始动画
      this.isTriggered = true
      this.refresheDataList()
    },
    onScroll(event) {
      // console.log(event)
      this.dataMap.get(this.type).scrollTop = event.detail.scrollTop;
    },
    evaluate(item) {
      // if(item.openid !== uni.getStorageSync('openId')){
      //   uni.showToast({
      //     title: '不可评价他人订单',
      //     icon: 'none'})
      //   return
      // }
      uni.navigateTo({
        url: '/pages/myOrder/evaluate/evaluate?id=' + item.orderId + '&userid=' + item.userid +
            '&type=1'
      })
    },
    zhifu(item) {
      // if(item.openid !== uni.getStorageSync('openId')){
      //   uni.showToast({
      //     title: '不可支付他人订单',
      //     icon: 'none'})
      //   return
      // }
      var that = this
      this.$httpapi('addPackageListtwo', 'POST', {
        orderId: item.orderId,
        price: item.price
      }).then(res => {
        if (res.code === 200) {
          if (res.data) {
            if (res.data.status === 1) {
              that.$utils.saveSyncTime()
              that.refresheDataList()
            }else {
              uni.requestPayment({
                provider: 'wxpay',
                timeStamp: res.data.timeStamp,
                nonceStr: res.data.nonceStr,
                package: res.data.package,
                signType: res.data.signType,
                paySign: res.data.paySign,
                success: function (rexx) {
                  that.$utils.saveSyncTime()
                  that.refresheDataList()
                },
                fail: function (err) {
                }
              });
            }
          }else{
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          }
        }
      })
    },
    quorder(item, index) {
      // if(item.openid && item.openid !== uni.getStorageSync('openId')){
      //   uni.showToast({
      //     title: '不可取消他人订单',
      //     icon: 'none'})
      //   return
      // }
      var that = this;
      uni.showModal({
        // title: '提示',
        content: '确认取消订单',
        success: function (res) {
          if (res.confirm) {
            that.$httpapi('quorder', 'POST', {
              orderId: item.orderId
            }).then(res => {
              if (res.code === 200) {
                that.$utils.saveSyncTime();
                that.refresheDataList();
              } else {
                uni.showToast({
                  title: res.msg,
                  icon: 'none'
                })
              }
            })
          } else if (res.cancel) {
          }
        }
      });
    },
    complete(item) {
      var that = this;
      this.$httpapi('okyan', 'POST', {
        orderId: item.orderId
      }).then(res => {
        if (res.code === 200) {
          that.$utils.saveSyncTime()
          that.refresheDataList()
          console.log("complete","sssssss")
        }
      })
    },
    loads() {
      var flag = ''
      if (this.type != 0) {
        flag = this.type
      }
      let flagData = this.dataMap.get(this.type);
      const url = `myorder?pageNum=${flagData.pageNum}&pageSize=10`;
      this.$httpapi(url, 'POST', {
        flag: flag,
        laxin:this.laxin
      }).then(res => {
        let flagList = flagData.list
        if (flagData.pageNum === 1) {
          flagList.length = 0;
        }
        if (flagList.length === 0) {
          flagData.syncTime = Date.now();
        }
        if (!res.data || res.data.length === 0) {
          //隐藏加载框
          uni.hideLoading();
        } else {
          flagData.total = res.total;
          if (res.total == flagList.length) {
            this.loading = 2
          }
          for (let i = 0; i < res.data.length; i++) {
            let newItem = res.data[i]

			for (let j = 0; j < newItem.xiangmu.length; j++) {
				// 预览图片 把图片.split(",")后放在listHuanimg数组里面
				preview.totalControl(newItem.xiangmu[j])
			}
            // 检查是否存在相同 orderId 的数据
            const index = flagList.findIndex(item => item.orderId === newItem.orderId);

            if (index !== -1) {
              // 如果存在相同 orderId 的数据，则替换
              flagList.splice(index, 1, newItem);
            } else {
              // 如果不存在相同 orderId 的数据，则添加新数据
              flagList.push(newItem);
            }
          }
          //隐藏加载框
          uni.hideLoading();
          if (res.total == flagList.length) {
            this.loading = 2
          }
        }
        this.$forceUpdate();
        this.isTriggered = false
      })
    },
    onScrolltolower() {
      if (this.loading === 2) {
        return;
      }
      this.loadMoreDataList()
    },
    quotation(item) {
      uni.navigateTo({
        url: '/pages/myOrder/QuotationList/QuotationList?id=' + item.orderId + '&moshi=' + item.moshi
      })
    },
    scroll(e) {
    },
    detail(item) {
      uni.navigateTo({
        url: '/pages/myOrder/OrderDetails/OrderDetails?id=' + item.orderId + '&laxin=' + this.laxin
      })
    },
    qiehuan(type) {
      if (type === 7) {
        this.laxin = 1
      } else {
        this.laxin = ''
      }
		this.$httpapi('selectuserinfo', 'POST', {})
      uni.showLoading({
        title: '加载中'
      });
      this.type = type
      this.needRefreshData()
      let data = this.dataMap.get(this.type);
      this.scrollTop = data.scrollTop
      if (data.total === data.list.length) {
        this.loading = 2
      }
    },
    index() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    },
    wallet() {
      uni.switchTab({
        url: '/pages/wallet/wallet'
      })
    },
    placeorder() {
      uni.switchTab({
        url: '/pages/PlaceOrder/PlaceOrder'
      })
    },
    user() {
      uni.switchTab({
        url: '/pages/user/user'
      })
    },
  }
}
</script>

<style lang="scss">
page {
  background-color: #F7F6FA;
}

.container {
  //padding-bottom: 150rpx;
  position: relative;
  height: 100%;

  .navList {
    background-color: #FFFFFF;
    z-index: 999999;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    width: 714rpx;
    padding: 0 18rpx;
    line-height: 58rpx;
    height: 66rpx;
    font-weight: 400;
    color: #333333;
    font-size: 28rpx;
    .select {
      font-size: 30rpx;
      font-weight: bold;
      color: #000;
    }
	.condition {
		padding: 0rpx 39rpx 0rpx 10rpx;
		text-align: center;
	}
  }

  .orderList {
    margin-top: 96rpx;

    .orderBox {
      margin: 0 auto 20rpx;
      padding: 20rpx;
      width: 670rpx;
      background: #FFFFFF;
      border-radius: 20rpx;

      .buttonx {
        text-align: center;
        width: 184rpx;
        height: 54rpx;
        border-radius: 32rpx 32rpx 32rpx 32rpx;
        border: 2rpx solid #535353;
        font-size: 24rpx;
        color: #535353;
        line-height: 58rpx;
      }

      .buttons {
        text-align: center;
        width: 188rpx;
        height: 58rpx;
        background: linear-gradient(180deg, #11C3EF 0%, #2089FF 100%);
        border-radius: 32rpx 32rpx 32rpx 32rpx;
        font-size: 24rpx;
        color: #FFFFFF;
        line-height: 58rpx;
      }
    }

    ._image {
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        width: 550rpx;
        height: 700rpx;
        position: relative;
        margin-top: 50rpx;
      }

      .text {
        text-align: center;
        position: absolute;
        margin-top: 240rpx;
        font-size: 25rpx;
        color: #2f84c7;
        border: 1px solid #2f84c7;
        width: 350rpx;
        height: 65rpx;
        line-height: 65rpx;
      }
    }

    .loading {
      text-align: center;
      font-size: 26rpx;
      color: #888;
      height: 90rpx;
      line-height: 60rpx;
    }
  }

  .tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999;
    width: 650rpx;
    background-color: #FFF;
    color: #9EA3AE;
    font-size: 24rpx;
    padding: 6rpx 50rpx;
    line-height: 36rpx;
    box-shadow: 0px -4px 10px 0px rgba(0, 0, 0, 0.10);
    text-align: center;
  }

  .filter {
    position: absolute;
    top: 0rpx;
    right: 40rpx;

    .icons {
      position: fixed;
      background-color: #fff;

    }
  }

  .popup_top {
    height: 300rpx;

    .order_quit {
      display: flex;
      justify-content: space-between;
      width: 95%;
      margin: auto;

      .order {
        font-weight: bold;
      }
    }

    .MonthYear {
      display: flex;
      justify-content: space-around;
      font-size: 25rpx;
      margin-top: 25rpx;

      .Month {
        background-color: #f3f2f7;
        padding: 15rpx 30rpx;
        border-radius: 5rpx;
      }

      .duction {
        background-color: #16aaf3;
        color: #fff;
        border-radius: 5rpx;
      }
    }

    .empty_Confirm {
      display: flex;
      justify-content: space-around;
      font-weight: 700;
      font-size: 25rpx !important;
      height: 70rpx;
      line-height: 70rpx;
      text-align: center;
      margin-top: 45rpx;

      .button1 {
        width: 43%;
        border: 1px solid #c7c7c7;
        border-radius: 10rpx;
      }

      .button2 {
        width: 43%;
        background-color: #16aaf3;
        color: #fff;
        border-radius: 10rpx;
      }
    }

    .content {
      flex-grow: 1; /* 填充剩余高度 */
    }
  }
  .scroll-view {
    flex: 1;
    overflow-y: scroll;
  }
}
</style>
